<template>
  <div class="ai_container">
    <div class="head">
      <div class="hleft">
        <img class="quotation" :src="quotationRight" alt="" srcset="" />
        <div class="context">
          <span class="name">懂课标、会教学的</span>
          <span class="name colorname">AI全能助教</span>
        </div>
        <img class="quotation" :src="quotationLeft" alt="" srcset="" />
        <img class="peak" :src="peak" alt="" srcset="" />
      </div>

      <div class="hright">
        <div class="chat chat-zhnawei" ref="typeArea">!</div>
        <img :src="Bot" alt="" srcset="" />
      </div>
    </div>
    <div class="section">
      <div class="tabsBox">
        <Tabs @change="tabClick" @searchChange="searchChange" @getList="getList" />
        <div class="cardList">
          <div class="list">
            <Card
              v-for="(item, key) in state.bots"
              :key="key"
              :dataMsg="item"
              :colorData="state.colorData[key % 4]"
              :bgData="state.bgData[key % 4]"
              @collect="getBot"
              :isCollect="false"
            />
          </div>
          <div v-if="state.bots.length === 0 && !state.loading" class="noContent">
            <div v-if="state.bots.length === 0 && !state.loading" class="no-data">
              <LottieAnimation no-data-name="animationData" class="img" />
              <span>暂无内容~</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import _ from 'lodash';
import Card from '@/components/card/index.vue';
import Tabs from '@/components/tabs/index.vue';
import { computed, watch, onMounted, reactive, ref } from 'vue';
import { typewriter } from '@/utils/typewriter';
import { getStorage } from '@/utils';
import LottieAnimation from '@/components/animation/index.vue';

import quotationLeft from '@/assets/ai/quotationLeft.svg';
import quotationRight from '@/assets/ai/quotationRight.svg';
import Bot from '@/assets/ai/bot.gif';
import peak from '@/assets/ai/peak.svg';

import center from '@/faker/center';

// 简化后的 state
const state = reactive({
  loading: false,
  bots: [] as any[],
  botTemp: [] as any[],
  colorData: ['#3C7EFF', '#00C2A7', '#714EFF', '#F35522'],
  bgData: ['#F4F9FF', '#EBFFFC', '#F2EFFF', '#FFF5F1'],
  activeName: '' as any,
  keyword: '' as string,
});

const typeArea = ref<HTMLElement | null>(null);

onMounted(() => {
  typewriter({
    el: typeArea.value,
    text: '老师您好，我是您的AI全能助教，能帮您高效完成一系列备授课工作，希望合作愉快!',
    speed: 100,
    onFinished: () => {},
    removeCursorAfterFinish: true, // ✅ 打完后删除光标
  });
  state.activeName = getStorage('writeActiveName');
  state.loading = true;
});

const getList = (list: any) => {
  if (state.activeName) {
    state.bots = _.filter(list, v => v.category === state.activeName);
  } else {
    state.bots = list;
  }

  state.botTemp = list;
  state.loading = false;
};

const getBot = async () => {
  state.loading = true;
  const data: any = center; // 这部分可以改为获取真实数据
  if (state.activeName) {
    state.bots = _.filter(data, v => v.category === state.activeName);
  } else {
    state.bots = data;
  }
  state.botTemp = data;
  state.loading = false;
};

// 筛选切换
const tabClick = async (activeName: any) => {
  state.activeName = activeName;
  getRes();
};

// 搜索
const searchChange = async (name: string) => {
  state.keyword = name;
  getRes();
};

const getRes = () => {
  try {
    let temp = [...state.botTemp];
    if (state.activeName) {
      temp = _.filter(state.botTemp, v => v.category === state.activeName);
    }
    if (state.keyword) {
      temp = _.filter(temp, v => v.name.includes(state.keyword));
    }
    state.bots = temp;
  } catch (error) {
    console.log('error ===> ', error);
  }
};
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>

<style lang="scss">
/* 光标样式 */
.typewriter-cursor {
  display: inline-block;
  width: 0;
  background-color: black;
  animation: blink 0.7s steps(1) infinite;
  margin-left: 2px;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
